<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        {% block title %} {% endblock %}
    </title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        /* 默认隐藏移动栏 */
        #mobile-bar {
            display: none;
        }

        /* 移动端适配 */
        @media screen and (max-width: 767px) {
            #mobile-bar {
                display: block;
            }

            /* 为底部导航腾出空间 */
            #box {
                padding-bottom: 60px;
            }

            /* 适配 iPhone 底部安全区域 */
            @supports (padding-bottom: env(safe-area-inset-bottom)) {
                #box {
                    padding-bottom: calc(60px + env(safe-area-inset-bottom));
                }
            }
        }
    </style>
    {% block head %} {% endblock %}
</head>

<body>
    <div id="box">
        {% block content %} {% endblock %}
    </div>
    <div id="mobile-bar">
        <!-- 
        你好，当你看到这个代码的时候，请不要删除它，因为这是为了适配移动端而添加的代码，谢谢
         -->
        {% include 'web/components/移动Bar栏.html' %}
    </div>
</body>
<script src="/static/js/hls.js"></script>
<script src="/static/js/axios.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    // 定义本地储存的Key
    const localStorageKey = 'videoRecords'; // 记录我的收藏
</script>
<!-- 配置 axios -->
<script>
    let loadIndex = null;
    // 配置全局API域名
    const ApiDomain = 'http://192.168.87.148:9002/';
    // 默认POST请求的请求头中是表单
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    // 配置 axios 的 baseURL
    axios.defaults.baseURL = ApiDomain;

    // 判断当前页面路径，设置对应的底部导航高亮
    document.addEventListener('DOMContentLoaded', function () {
        const currentPath = window.location.pathname;
        const barItems = document.querySelectorAll('.bar-item');

        barItems.forEach(item => {
            if (item.getAttribute('href') === currentPath) {
                item.classList.add('active');
            }
        });
    });


    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        // loading
        loadIndex = layer.msg('加载中', {
            icon: 16,
            shade: 0.01
        });
        return config;
    }, function (error) {
        // 对请求错误做些什么
        layer.close(loadIndex);
        return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        layer.close(loadIndex);
        return response;
    }, function (error) {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        layer.close(loadIndex);
        return Promise.reject(error);
    });

</script>


<!-- 添加自定义脚本 -->
<script>
    // 添加自定义脚本
    var util = layui.util;
    util.fixbar(); // 配置页面高度太高时, 可以一键返回顶部
</script>

<script>


</script>
{% block script %} {% endblock %}

</html>